import React from "react";
import { Link } from "react-router-dom";

const Footer: React.FC = () => {
  const currentYear = new Date().getFullYear();

  return (
    <footer className="bg-gradient-to-r from-pink-50 to-purple-50 border-t border-pink-200">
      <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          {/* 品牌信息 */}
          <div className="col-span-1 md:col-span-2">
            <div className="flex items-center mb-4">
              <img
                className="h-8 w-auto"
                src="https://miaoda-site-img.cdn.bcebos.com/placeholder/code_logo_default.png"
                alt="时尚衣橱"
              />
              <span className="ml-2 text-xl font-bold text-pink-600">时尚衣橱</span>
            </div>
            <p className="text-gray-600 mb-4">
              专业的时装购物网站，为用户提供丰富的时装选择和便捷的购物体验，致力于打造时尚潮流的购物平台。
            </p>
            <p className="text-sm text-gray-500">
              让每个人都能找到属于自己的时尚风格，享受购物的乐趣。
            </p>
          </div>

          {/* 快速链接 */}
          <div>
            <h3 className="text-lg font-semibold text-pink-800 mb-4">
              快速链接
            </h3>
            <div className="space-y-2">
              <Link to="/products" className="block text-gray-600 hover:text-pink-600 transition-colors">
                商品浏览
              </Link>
              <Link to="/products?category=女装" className="block text-gray-600 hover:text-pink-600 transition-colors">
                女装系列
              </Link>
              <Link to="/products?category=男装" className="block text-gray-600 hover:text-pink-600 transition-colors">
                男装系列
              </Link>
              <Link to="/products?category=配饰" className="block text-gray-600 hover:text-pink-600 transition-colors">
                时尚配饰
              </Link>
            </div>
          </div>

          {/* 客户服务 */}
          <div>
            <h3 className="text-lg font-semibold text-pink-800 mb-4">
              客户服务
            </h3>
            <div className="text-gray-600 space-y-2">
              <p>服务时间：9:00-21:00</p>
              <p>客服热线：400-888-8888</p>
              <p>邮箱：service@fashion-closet.com</p>
              <p>在线客服：7×24小时</p>
            </div>
          </div>
        </div>

        {/* 商品分类 */}
        <div className="mt-8 pt-8 border-t border-pink-200">
          <h4 className="text-md font-semibold text-pink-800 mb-4">热门分类</h4>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm text-gray-600">
            <div>
              <h5 className="font-medium text-gray-800 mb-2">女装</h5>
              <ul className="space-y-1">
                <li>连衣裙</li>
                <li>上衣</li>
                <li>裤装</li>
                <li>外套</li>
              </ul>
            </div>
            <div>
              <h5 className="font-medium text-gray-800 mb-2">男装</h5>
              <ul className="space-y-1">
                <li>衬衫</li>
                <li>T恤</li>
                <li>裤装</li>
                <li>外套</li>
              </ul>
            </div>
            <div>
              <h5 className="font-medium text-gray-800 mb-2">配饰</h5>
              <ul className="space-y-1">
                <li>包包</li>
                <li>鞋履</li>
                <li>首饰</li>
                <li>帽子</li>
              </ul>
            </div>
            <div>
              <h5 className="font-medium text-gray-800 mb-2">特色</h5>
              <ul className="space-y-1">
                <li>新品上市</li>
                <li>热销单品</li>
                <li>限时优惠</li>
                <li>品牌专区</li>
              </ul>
            </div>
          </div>
        </div>

        {/* 版权信息 */}
        <div className="mt-8 pt-8 border-t border-pink-200 text-center text-gray-600">
          <p>{currentYear} 时尚衣橱</p>
        </div>
      </div>
    </footer>
  );
};

export default Footer;
